<script setup>
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

// 计算是否显示主页面内容
const showMainContent = computed(() => {
    const currentRoutePath = route.path
    const baseRoutePath = '/device-center/device-monitor'
    return currentRoutePath === baseRoutePath
})

const devices = ref([
    { id: 1, name: '水表', type: 1, icon: 'WaterMeter' },
    { id: 2, name: '电表', type: 2, icon: 'ElectricMeter' },
    { id: 7, name: '离线及异常设备', type: 'offline-error', icon: 'Warning' },
])

// 处理顶部控制卡片导航
const handleNavigate = (route) => {
    router.push({
        name: route === 'automation-control' ? 'AutomationControl' : 'SpaceControl'
    })
}

// 处理设备卡片点击
const handleDeviceClick = (device) => {
    let path = ''

    switch (device.type) {
        case 1: // 水表
            path = 'meter-management'
            break
        case 2: // 电表 
            path = 'meter-management'
            break
        // case 'switch': // 远程开关
        //     path = 'remote-switch'
        //     break
        case 'offline-error': // 离线及异常设备
            path = 'offline-error-devices'
            break
        default:
            return
    }

    router.push({
        path: `/device-center/device-monitor/${path}`,
        query: {
            type: device.type
        }
    })
}
</script>

<template>
    <div class="device-control">
        <div v-if="showMainContent" key="main-content" class="main-content">
            <!-- 设备控制网格 -->
            <el-row :gutter="24" class="device-grid">
                <el-col :span="8" v-for="device in devices" :key="device.id" class="device-col">
                    <el-card class="control-card device-card hover-effect" shadow="hover"
                        @click="handleDeviceClick(device)">
                        <div class="card-content">
                            <i :class="['el-icon-' + device.icon]"></i>
                            <span>{{ device.name }}</span>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>

        <!-- 修改后的路由视图过渡动画 -->
        <router-view v-slot="{ Component }">
            <transition name="fade" mode="out-in">
                <component :is="Component" />
            </transition>
        </router-view>
    </div>
</template>

<style lang="scss" scoped>
.device-control {
    height: 100%;
    background-color: var(--color-background);

    .section-title {
        font-size: var(--font-size-medium);
        font-weight: var(--font-weight-primary);
        color: var(--color-text-primary);
        margin: 24px 0 16px;
    }

    .control-card {
        height: 140px;
        border-radius: 8px;
        transition: all 0.3s ease;

        &.hover-effect:hover {
            transform: translateY(-4px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
        }

        .card-content {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            cursor: pointer;

            i {
                font-size: 32px;
                margin-bottom: 12px;
                color: var(--color-primary);
            }

            span {
                font-size: var(--font-size-base);
                color: var(--color-text-primary);
            }
        }
    }

    .device-grid {
        .device-col {
            margin-bottom: 24px;
        }

        .device-card {
            height: 120px;
        }
    }

    // 转场动画
    .fade-enter-active,
    .fade-leave-active {
        transition: opacity 0.3s ease;
        width: 100%;
    }

    .fade-enter-from,
    .fade-leave-to {
        opacity: 0;
    }
}
</style>